<template>

<!-- <div id="container" style="width:800px;height:300px"></div> -->
<div class="ss-box">
  <div id="container" class="map-demo" />
  <div class="info-box">
    <div class="input-box">
      <div class="uid-input">
        <span> UID:</span> <el-input placeholder="UID" v-model="uid"> </el-input>
      </div>

      <div class="uuid-input">
        <span> UUID: </span> <el-input placeholder="uuid" v-model="uuid"> </el-input>
      </div>

    </div>

    <div class="fuction-box">
      <el-switch v-model="makerType" active-text="散点模式" inactive-text="轨迹模式"> </el-switch>
      <el-button  @click="handleClick()" type="primary">查询并绘制</el-button>
    </div>
    <el-button  @click="CloseVel()" type="primary">关闭/打开速度曲线</el-button>
    <div style="height:400px;width:450px;display:block" id="echartDemo" ></div>
    <div class="fuction-box"></div>

  </div>
</div>
</template>
 <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
 //<script src="lib/echarts.js"></script>
<script>
  import AMap from 'AMap'
  import echarts from 'echarts'
  export default {
    data() {
      return {
        icon:"http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        markers: [{ position: [116.205467, 39.907761] }, { position: [116.368904, 39.913423] }, { position: [116.305467, 39.807761] }],
        uid: '',
        uuid: '',
        makerType: true,
        testData: "",
        tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },]
        //tableData: []
      }
    },
    methods: {
      handleClick() {
        echartDemo.style.display="block"
        console.log(this.uid);
        this.$axios.get("/api/trajectory/trajec?UID="+this.uid)
          .then((response) => {
              console.log(response.data.data)
              this.testData = JSON.parse(response.data.data),
              console.log(this.testData.len)
              this.map.clearMap();
              if (this.makerType){
                  for (var i=1; i<=this.testData.len;i++) {
                    var str1='point'+i.toString()+'x'
                    var str2='point'+i.toString()+'y'
                    this.$options.methods.addMarker(this.map,this.testData[str1],this.testData[str2],i) 
              }}
              else{
                  var Path=[];
                  var length=this.testData.len;
                  for (var j=1; j<=length;j++) {
                      var tri1='point'+j.toString()+'x'
                      var tri2='point'+j.toString()+'y'
                      Path.push(new AMap.LngLat(this.testData[tri1],this.testData[tri2]))           
              }
              this.$options.methods.addLine(this.map,Path) 
              var end1='point'+length.toString()+'x'
              var end2='point'+length.toString()+'y'
              this.$options.methods.addTerminalPoint(this.testData['point1x'],this.testData['point1y'],this.testData[end1],this.testData[end2],this.map,length)
              //console.log(str1,str2)   
              }
              this.map.setFitView();
              var Data1=[],Data2=[]
              this.$axios.get("/api/trajectory/vel?UID="+this.uid)
                .then((response) => {
                    console.log(response.data.data)
                    this.testData = JSON.parse(response.data.data)
                    for(var h=1; h<=this.testData.len;h++) {
                        var str='point'+h.toString()
                        Data1.push(str)
                        Data2.push(parseInt(this.testData[str]))          
              }
              this.$options.methods.SearchVel(Data1,Data2)
          });
        });
      },
      SearchVel(a,b){
          var Data1=a,Data2=b;
          var Mychart=echarts.init(document.getElementById('echartDemo'));
          var option={
              tooltip: {              
                    trigger: 'axis'
              }, 
              legend: {               
                  data:['速度变化曲线']
              },
              color: ['#8AE09F'],      
              xAxis: {                
                  type: 'category',
                  boundaryGap: false,     
                  data: Data1,
                  name: 'Point',           //X轴 name
                  nameTextStyle: {        //坐标轴名称的文字样式
                      color: '#FA6F53',
                      fontSize: 16,
                      padding: [0, 0, 0, -10]
              },
              axisLine: {             //坐标轴轴线相关设置。
                  lineStyle: {
                      color: '#FA6F53',
                  }
              }},
              yAxis: {
                  name: 'Vel',
                  nameTextStyle: {
                      color: '#FA6F53',
                      fontSize: 16,
                      padding: [0, 0, 2, 0]
                  },
                  axisLine: {
                      lineStyle: {
                          color: '#FA6F53',
                      }
                  },
                  type: 'value'
              },
              series: [
                {
                  //name: '速度变化曲线',
                  data:  Data2,
                  type: 'line',  
                  smooth: true,             
                  lineStyle: {                
                      normal: {
                          color: '#8AE09F',
                      }
                  },
                },
            ]
        };
        Mychart.setOption(option);
      },
      CloseVel(){
          if(echartDemo.style.display=="block")
          {
            echartDemo.style.display="none";
          }
          else{
            echartDemo.style.display="block"
          }
      },
      addMarker(Map,x,y,i) {
          var marker
          console.log(i)
          console.log('success')
          AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
          //启动页面
          marker=new SimpleMarker({
              iconLabel: i.toString(),
                  //自定义图标地址
                  iconStyle: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',

                  //设置基点偏移
                  offset: new AMap.Pixel(0,0),

                  map: Map,

                  showPositionPoint: true,
                  position: [x, y],
                  zIndex: 100
              });
              var info = [];
              var str='point'+i.toString();
              info.push(str);
              info.push("经纬度坐标 ");
              info.push(x,y);
              var inforWindow = new AMap.InfoWindow({
                  offset:new AMap.Pixel(0,-25),
                  content:info.join("<br>"),
                  fourOpts:{width:600,height:500}
              });
              AMap.event.addListener(marker,"click",function(){
                  inforWindow.open(Map,new AMap.LngLat(x,y));
              });
              Map.setFitView();
          });
    },
    addTerminalPoint(xstart,ystart,xend,yend,Map,length){
        var startIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-9, -3)
        });

        var startMarker = new AMap.Marker({
            position: new AMap.LngLat(xstart,ystart),
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
        });

        var endIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-95, -3)
        });

        var end1='point'+length.toString()+'x'
        var end2='point'+length.toString()+'y'
        var endMarker = new AMap.Marker({
            position: new AMap.LngLat(xend,yend),
            icon: endIcon,
            offset: new AMap.Pixel(-13, -30)
        });

        Map.add([startMarker,endMarker]);    

    },
    addLine(Map,Path){
            new AMap.Polyline({
            map: Map,
            path:Path,
            strokeWeight: 10, // 线条宽度，默认为 1
            strokeColor: '#3366bb', // 线条颜色
            lineJoin: 'round', // 折线拐点连接处样式
            showDir:true,
        });
    }},
    mounted: function () {
      this.map = new AMap.Map('container', {
        center: [116.397451,39.909187],
        resizeEnable: true,
        zoom: 13,
      });
      this.$options.methods.SearchVel([0],[0]) ;

    }
  

  }
</script>


<style lang="less" scoped>
.ss-box{display:flex; flex-direction: row;}


.info-box{display:flex; flex-direction: column;width: 440px;margin: 0px 20px;}

.input-box{ height: 40px; display:flex; flex-direction: row;justify-content:center
}
.uuid-input{
  margin: auto;
  span{margin: auto;}
  display:flex; flex-direction: row;justify-content:center
}
.uid-input{
  margin: auto;
  /deep/.el-input {width: 60px;}
  span{margin: auto;}
  display:flex; flex-direction: row;justify-content:center
}

.fuction-box{
  margin-top: 10px;
  /deep/.el-switch {margin: auto;}
  /deep/.el-button {margin: 10px;}
   display:flex; flex-direction: row;justify-content:center
}
/deep/.el-input__inner{padding: 0 5px;text-align: center;}
// /deep/.el-table{margin: auto;}
/deep/.cell{text-align: center;}
.map-demo{width:1000px;height:700px;}

/deep/.amap-marker-content,/deep/.amap-icon { img{ width: 26px; height: 34px; } } 
</style>